<template>
  <el-form ref="userProjectExForm" :model="userProjectEx" :rules="userEduExsRules" label-width="120px" class="demo-ruleForm"
    size="default" status-icon>
    <p style="font-size: 24px;margin-bottom: 30px;padding-top: 10px;padding-left: 20px;">项目经验</p>
    <el-form-item label="完成时间"  style="margin-top: 10px; width: 420px;">
      <el-date-picker v-model="userProjectEx.projectTime" type="monthrange" range-separator="to"
        :start-placeholder=userProjectEx.projectTime[0] :end-placeholder=userProjectEx.projectTime[1] format="YYYY.MM"
        value-format="YYYY.MM" />

    </el-form-item>
    <el-form-item label="所在公司" style="margin-top: 10px;">
      <el-input v-model="userProjectEx.projectEnterprise" style="width: 300px;" />
    </el-form-item>


    <el-form-item label="项目名称"  style="margin-top: 10px;">
      <el-input v-model="userProjectEx.projectName" style="width: 300px;" />
    </el-form-item>

    <el-form-item label="经验简介">
      <el-input v-model="userProjectEx.projectDetail" 
                :autosize="{ minRows: 5, maxRows:10 } " 
                type="textarea"
                placeholder="经验简介..." 
                style="width: 800px;"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="saveInfo(userProjectExForm)">保存</el-button>
      <el-button @click="cancelEdit(userProjectExForm)">取消</el-button>
    </el-form-item>
  </el-form>

</template>
<script lang='ts' setup>
import { ref, onMounted, getCurrentInstance, reactive } from 'vue'
import { useStore } from "vuex"
import type { FormInstance } from 'element-plus'
import { userProjectEx, userEduExsRules } from "@/utills/userInfoValidators"
import { elmessage, data } from "@/hook/hook"
import { useRouter } from "vue-router"
import { upUserInfo } from "@/api/userApi"
const store = useStore()
const router = useRouter()
const userProjectExForm = ref<FormInstance>()
// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例

onMounted(() => {
  userProjectEx.projectTime = store.state.userState.userProjectEx.projectTime
  userProjectEx.projectEnterprise = store.state.userState.userProjectEx.projectEnterprise
  userProjectEx.projectName = store.state.userState.userProjectEx.projectName
  userProjectEx.projectDetail = store.state.userState.userProjectEx.projectDetail

})

// 提交按钮
const saveInfo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.commit("upUserProjectEx", userProjectEx)
      store.commit("editProjectEx")
      // 将信息提交给后端
      const updata = { ...data(), ...userProjectEx, ...{ upPart: "projectEx" } }
      upUserInfo(updata).then((res: any) => {
        if (res.data["code"] == "200") {
          
          elmessage(res.data["message"], res.data["type"])
        } else if (res.data["code"] == "300") {
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/login")
          }, 500);
          localStorage.clear()
        } else {
          console.log(res.data["message"]);

        }

      })
      
      
    }else{
      console.log('error submit!', fields)
    }
  })
}
// 取消按钮
function cancelEdit(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  store.commit("editProjectEx")
}


</script>
<style scoped>
.demo-ruleForm {
  height: 450px;
}

.demo-ruleForm:hover {
  transition-duration: 0.3s;
  transition-property: box-shadow;
  box-shadow: 0 0 3px #97999b;
  cursor: pointer;
}
</style>